/**
 * description
 * <p>fill description</p>
 * @author zido
 * @since 2017/6/4 0004
 */
import React from 'react'
import PropTypes from 'prop-types'
import {Icon,Button,Steps} from 'antd'
const {Step} = Steps
import {isEmpty} from './../../../../Util'
import ShopForm from '../../../../components/ShopForm'
import BankForm from '../../../../components/BankForm'
import UserForm from '../../../../components/userForm'
import BusinessForm from '../../../../components/BusinessForm'
import {Link} from 'react-router'
import './BusinessAdd.less'
export default class BusinessAdd extends React.Component {
  next(){
    const {changeStep,businessAdd} = this.props
    const {current} = businessAdd
    /*const {id} = this.props.params
    const {userForm,businessForm,shopForm,bankForm} = businessAdd.forms
    const forms = [businessForm,shopForm,bankForm]
    if(!isEmpty(id)){
      forms.splice(0,0,userForm)
    }
    forms[current].validateFields((err) => {
      if(err)
        return
      changeStep(current + 1)
    })*/
    changeStep(current + 1)
  }
  prev(){
    const {changeStep} = this.props
    const {current} = this.props.businessAdd
    changeStep(current - 1)
  }

  setUserForm(form){
    const {saveFormProps} = this.props
    saveFormProps({userForm:form})
  }
  setBusinessForm(form){
    const {saveFormProps} = this.props
    saveFormProps({businessForm:form})
  }
  setShopForm(form){
    const {saveFormProps} = this.props
    saveFormProps({shopForm:form})
  }
  setBankForm(form){
    const {saveFormProps} = this.props
    saveFormProps({bankForm:form})
  }
  handleSubmit(){
    const {forms,current,data} = this.props.businessAdd
    const {userForm,businessForm,shopForm,bankForm} = forms
    const ffs = [businessForm,shopForm,bankForm]
    if(!isEmpty(this.props.params.id))
      ffs.splice(0,0,userForm)
    ffs[current].validateFields((err) => {
      if(err) return
      console.log(data)
    })
  }
  handleSaveFormData(form){
    const values = form.getFieldsValue()
    this.handleSaveValues(values)
  }
  handleSaveValues(values){
    const {data} = this.props.businessAdd
    const {saveForms} = this.props
    saveForms({
      ...data,
      ...values,
    })
  }
  onBusinessChange(){
    const {businessForm} = this.props.businessAdd.forms
    this.handleSaveFormData(businessForm)
  }
  onShopsChange(values){
    const {shopForm} = this.props.businessAdd.forms
    if(values != null)
      this.handleSaveValues(values)
    else
      this.handleSaveFormData(shopForm)
  }
  onBankCardsChange(){
    const {bankForm} = this.props.businessAdd.forms
    this.handleSaveFormData(bankForm)
  }
  render() {
    const {businessAdd} = this.props
    const {id} = this.props.params
    const {data,current} = businessAdd
    const {shops,bankCards,user,businessUser} = data
    const steps = [{
      title:'基本信息',
      content:<BusinessForm businessUser={businessUser} setForm={this.setBusinessForm.bind(this)} onChange={this.onBusinessChange.bind(this)}/>
    },{
      title:'店铺信息',
      content:<ShopForm shops={shops} setForm={this.setShopForm.bind(this)} onChange={this.onShopsChange.bind(this)}/>
    },{
      title:'银行卡信息',
      content:<BankForm bankCards={bankCards} setForm={this.setBankForm.bind(this)} onChange={this.onBankCardsChange.bind(this)}/>
    }]
    if(!isEmpty(id)){
      steps.splice(0,0,{
        title:'用户信息',
        content:<UserForm user={user} setForm={this.setUserForm.bind(this)}/>
      })
    }
    return (
      <div style={{width:800,margin:'auto'}}>
        <Link to="/business"><Icon type="arrow-left" />返回商家信息管理</Link>
        <div className="form-business-content">
          <Steps current={current} style={{width:600,margin:'auto'}}>
            {steps.map(item => <Step key={item.title} title={item.title} />)}
          </Steps>
          <div className="steps-content">{steps[current].content}</div>
          <div className="steps-action">
          {
              current > 0
              &&
              <Button style={{ marginRight: 8 }} onClick={this.prev.bind(this)}>
                上一步
              </Button>
            }
            {
              current < steps.length - 1
              &&
              <Button type="primary" onClick={this.next.bind(this)}>下一步</Button>
            }
            {
              current === steps.length - 1
              &&
              <Button type="primary" onClick={this.handleSubmit.bind(this)}>提交</Button>
            }
          </div>
        </div>
      </div>
    )
  }
}

BusinessAdd.propTypes = {
  businessAdd:PropTypes.object.isRequired,
  saveForms:PropTypes.func.isRequired,
  changeStep:PropTypes.func.isRequired,
  insertBankCardName:PropTypes.func.isRequired,
  saveFormProps:PropTypes.func.isRequired,
  params:PropTypes.any,
  postAddData:PropTypes.func.isRequired,
}